<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截图</title>
</head>
<body>
    <button onclick="startScreenshot()">开始截图</button>
    <div id='screenshot' style="position: relative; background-color: red" >
        <div style="position: absolute; left: 0"  onmousedown="_onmousedown()" onmousemove="_onmousemove()" onmouseup="_onmouseup()">
            <div
                    id="lt"
                    style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: nw-resize"
                    onmousedown="dotMouseDown()"
                    onmousemove="dotMouseMove()"
                    onmouseup="dotMouseUp()"
            ></div>
            <div id="tm" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: n-resize"></div>
            <div id="rt" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: ne-resize"></div>
            <div id="lm" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: w-resize"></div>
            <div id="rm" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: e-resize"></div>
            <div id="lb" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: sw-resize"></div>
            <div id="bm" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: s-resize"></div>
            <div id="rb" style="position: absolute;width:5px;height:5px;border-radius:50%;background-color:red;cursor: se-resize"></div>
            <canvas id="myCanvas"/>
        </div>
        <div style="position: absolute; right: 0">
            <canvas id="tarCanvas"/>
        </div>
    </div>
    <img id='srcImg' src='../static/image.jpg'/>

</body>
<script>
    let init = false
    let down = false
    let runStart = false
    let myCanvas
    let srcImg
    let height
    let width
    let context
    let downX
    let downY
    let screenshotWidth
    let screenshotHeight

    let ltFlag = false

    function startScreenshot() {
        myCanvas = document.getElementById("myCanvas");
        srcImg = document.getElementById("srcImg");
        height = srcImg.clientHeight
        width = srcImg.clientWidth
        myCanvas.setAttribute("height", '' + height)
        myCanvas.setAttribute("width", '' + width)
        context = myCanvas.getContext("2d");
        context.fillStyle = "rgba(0,0,0,0.6)"
        context.strokeStyle = 'rgba(0,143,255,1)'
        context.fillRect(0, 0, height, width);
        context.globalCompositeOperation = 'destination-over'
        context.drawImage(srcImg, 0, 0, height, width);
        init = true
    }

    function _onmousedown() {
        if (init) {
            downX = event.clientX
            downY = event.clientY
            down = true
        }

    }

    function _onmouseup() {
        if (init) {
            down = false
            runStart = true
        }

        myCanvas = document.getElementById("myCanvas");
        myCanvas.setAttribute("height", '' + height)
        myCanvas.setAttribute("width", '' + width)
        const myCanvasContext = myCanvas.getContext("2d");
        myCanvasContext.drawImage(srcImg, 0, 0, height, width);
        const imgData = myCanvasContext.getImageData(downX, downY, event.clientX - downX, event.clientY - downY);
        const tarCanvas = document.getElementById("tarCanvas");
        tarCanvas.setAttribute("height", '' + height)
        tarCanvas.setAttribute("width", '' + width)
        const tarCanvasContext = tarCanvas.getContext("2d");
        tarCanvasContext.putImageData(imgData, height - event.clientX + downX, 0);
    }

    function _onmousemove() {
        if (init && down && !runStart) {
            context.clearRect(0, 0, height,width)
            context.fillStyle = "rgba(0,0,0,0.6)"
            context.strokeStyle = 'rgba(0,143,255,1)'
            context.fillRect(0,0,height,width);
            context.clearRect(downX, downY, event.clientX - downX, event.clientY - downY)

            const lt = document.getElementById("lt")
            lt.style.left = `${downX - 5}px`
            lt.style.top = `${downY - 5}px`

            const tm = document.getElementById("tm")
            tm.style.left = `${downX + (event.clientX - downX)/ 2}px`
            tm.style.top = `${downY - 5}px`

            const rt = document.getElementById("rt")
            rt.style.left = `${downX + event.clientX - downX}px`
            rt.style.top = `${downY - 5}px`

            const lb = document.getElementById("lb")
            lb.style.left = `${downX - 5}px`
            lb.style.top = `${downY + event.clientY - downY}px`

            const bm = document.getElementById("bm")
            bm.style.left = `${downX + (event.clientX - downX)/ 2}px`
            bm.style.top = `${downY + event.clientY - downY}px`

            const rb = document.getElementById("rb")
            rb.style.left = `${downX + event.clientX - downX}px`
            rb.style.top = `${downY + event.clientY - downY}px`

            const lm = document.getElementById("lm")
            lm.style.left = `${downX - 5}px`
            lm.style.top = `${downY + (event.clientY - downY) / 2}px`

            const rm = document.getElementById("rm")
            rm.style.left = `${downX + event.clientX - downX}px`
            rm.style.top = `${downY + (event.clientY - downY) / 2}px`

            screenshotWidth = event.clientX - downX
            screenshotHeight = event.clientY - downY

        }
    }

    function dotMouseDown() {
        downX = event.clientX
        downY = event.clientY
        ltFlag = true
    }

    function dotMouseMove() {
        if (ltFlag) {

            context.clearRect(0, 0, height,width)
            context.fillStyle = "rgba(0,0,0,0.6)"
            context.strokeStyle = 'rgba(0,143,255,1)'
            context.fillRect(0,0,height,width);
            downX = event.clientX
            downY = event.clientY
            screenshotWidth = downX - event.clientX + screenshotWidth
            screenshotHeight = downY - event.clientY + screenshotHeight
            context.clearRect(downX, downY, screenshotWidth, screenshotHeight)


            const lt = document.getElementById("lt")
            lt.style.left = `${downX - 5}px`
            lt.style.top = `${downY - 5}px`

            const tm = document.getElementById("tm")
            tm.style.left = `${downX + (screenshotWidth)/ 2}px`
            tm.style.top = `${downY - 5}px`

            const rt = document.getElementById("rt")
            rt.style.left = `${downX + screenshotWidth}px`
            rt.style.top = `${downY - 5}px`

            const lb = document.getElementById("lb")
            lb.style.left = `${downX - 5}px`
            lb.style.top = `${downY + screenshotHeight}px`

            const bm = document.getElementById("bm")
            bm.style.left = `${downX + screenshotWidth/ 2}px`
            bm.style.top = `${downY + screenshotHeight}px`

            const rb = document.getElementById("rb")
            rb.style.left = `${downX + screenshotWidth}px`
            rb.style.top = `${downY + screenshotHeight}px`

            const lm = document.getElementById("lm")
            lm.style.left = `${downX - 5}px`
            lm.style.top = `${downY + screenshotHeight / 2}px`

            const rm = document.getElementById("rm")
            rm.style.left = `${downX + screenshotWidth}px`
            rm.style.top = `${downY + screenshotHeight / 2}px`

        }
    }

    function dotMouseUp() {
        ltFlag = false
    }
</script>
</html>